<template>
    <div class="login-view">
        <div class="login-form">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="账户" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="code">
                    <el-row>
                        <el-col :span="16">
                            <el-input v-model="ruleForm.code"></el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-image
                                @click="handleCaptchaImage"
                                :src="url"
                                fit="fill"
                            ></el-image>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')"
                        >登录</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
// import { getPostList } from '@/api/postManage.js'
import { getCaptchaImage, login } from '@/api/login.js'
export default {
    data() {
        return {
            ruleForm: {
                username: '',
                password: '',
                code: '',
                uuid: ''
            },
            url: '',
            rules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {

                    // console.log(this.ruleForm)
                    const res = await login(this.ruleForm)
                    if (res.data.code === 200) {
                        Cookies.set('ruoyitoken', res.data.token)
                        this.$router.push('/')
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        handleCaptchaImage() {
            getCaptchaImage().then((res) => {
                this.url = 'data:image/png;base64,' + res.data.img
                this.ruleForm.uuid = res.data.uuid
            })
        }
    },
    created() {
        this.handleCaptchaImage()
    }
}
</script>

<style scoped>
.login-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: url('https://img0.baidu.com/it/u=844299758,3140948084&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500')
        no-repeat center center;
    background-size: cover;
}

.login-form {
    width: 400px;
    padding: 20px 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* 验证码输入框 */
.el-col-16 .el-input {
    margin-right: 10px;
}

/* 验证码图片 */
.el-image {
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: transform 0.2s ease-in-out;
}

.el-image:hover {
    transform: scale(1.05);
}

/* 登录按钮 */
.el-button--primary {
    width: 100%;
    font-size: 16px;
    padding: 12px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.el-button--primary:hover {
    background-color: #409eff;
    transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 600px) {
    .login-view {
        padding: 20px;
    }

    .login-form {
        width: 100%;
        max-width: 400px;
    }
}
</style>